<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品录入</title>
    <style>
        body {
            font-family: sans-serif;
        }

        #form {
            margin-bottom: 20px;
        }

        label {
            display: inline-block;
            font-size: 60px;
        }

        input[type="text"],
        input[type="number"] {
            width: 500px;
            height: 96px;
            margin-left: 20px;
            font-size: 60px;
            border-color: #0c0c0c;
        }

        textarea {
            width: 100%;
            margin-bottom: 10px;
        }

        button {
            width: 500px;
            height: 100px;
            font-size: 50px;
            background-color: aqua;
        }

        .line {
            height: 160px;
        }

        .goods {
            font-size: 60px;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
<h1 style="text-align: center; font-size: 80px">商品录入</h1>
<div id="form">
    <div class="line">
        <label>商品名字：</label>
        <input type="text" id="name"/>
    </div>
    <div class="line">
        <label>商品代码：</label>
        <input type="text" id="code"/>
    </div>
    <div class="line">
        <label>商品个数：</label>
        <input type="number" id="quantity"/>
    </div>
    <div style="text-align: center">
        <button onclick="addProduct()">添加商品</button>
    </div>
</div>
<div id="output">
    <div style="margin: 60px 0; display: flex;justify-content: center; align-items: center">
        <div style="text-align: center; font-size: 80px">商品清单</div>
        <button onclick="clearList()" style="width: 300px; margin-left: 30px">清除数据</button>
    </div>
    <div style="padding: 0 50px">
        <div id="myList"></div>
    </div>
    <div style="text-align: center; margin-top: 30px">
        <button id="copyButton" data-clipboard-target="#myList">
            导出清单
        </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
    <script>
        var products = [];
        var clipboard = new ClipboardJS('#copyButton');

        window.onload = function () {
            var stateProducts = localStorage.getItem('PRODUCT_LIST') || ''
            products = stateProducts ? JSON.parse(stateProducts) : [];
            updateOutput()
            console.log(1111, products)
        }

        function addProduct() {
            var nameInput = document.getElementById("name");
            var codeInput = document.getElementById("code");
            var quantityInput = document.getElementById("quantity");

            var name = nameInput.value.trim();
            var code = codeInput.value.trim();
            var quantity = parseInt(quantityInput.value.trim());

            if (name === "" || code === "" || isNaN(quantity)) {
                alert("请填写正确的商品信息！");
                return;
            }

            var isReady = false;
            for (var i = 0; i < products.length; i++) {
                if (products[i].name === name) {
                    isReady = true;
                    break;
                }
            }

            if (isReady) {
                var _products = products;
                products = _products.map(function (it) {
                    if (it.name === name) {
                        return {
                            name: name,
                            list: it.list.concat({code: code, quantity: quantity})
                        };
                    }
                    return it;
                });
            } else {
                var product = {name: name, list: [{code: code, quantity: quantity}]};
                products.push(product);
            }
            localStorage.setItem("PRODUCT_LIST", JSON.stringify(products))
            clearForm();
            updateOutput();
        }

        function clearForm() {
            // document.getElementById("name").value = "";
            document.getElementById("code").value = "";
            document.getElementById("quantity").value = "";
        }

        function updateOutput() {
            var myList = document.getElementById("myList");
            // 创建一个空字符串以保存呈现的HTML代码
            var html = "";

            // 循环遍历数组并将每个项目呈现为列表项
            for (var i = 0; i < products.length; i++) {
                var innerHtml = "";
                if (products[i].list) {
                    for (var j = 0; j < products[i].list.length; j++) {
                        innerHtml += "<span>" + products[i].list[j].code + "-" + products[i].list[j].quantity + "</span>； ";
                    }
                }
                html += "<div class=\"goods\">" + products[i].name + "：" + innerHtml + "</div>";
            }

            // 将HTML代码插入列表元素中
            myList.innerHTML = "<ul>" + html + "</ul>";
        }

        function clearList() {
            const result = window.confirm('确认删除？')
            if (result) {
                localStorage.removeItem('PRODUCT_LIST')
                products = []
                updateOutput()
            }
        }
    </script>

</body>
</html>